// 响应式
function defineReative (obj, key, val) {
  // 递归
  observe(val)
  // 对传入的obj进行访问拦截
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key)
      return val
    },
    set (newVal) {
      console.log('newVal', newVal)
      if (newVal !== val) {
        val = newVal
        observe(newVal)
      }
     }
  })
}

// 对象
function observe(obj) {
  if (typeof obj !== 'object' || obj == null) {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReative(obj, key, obj[key])
  })
}

// 简易版set
function set(obj, key , val) {
  defineReative(obj, key, val)
}

const obj = {
  foo: 'foo',
  bar: 'bar',
  baz: {a: 1}
}

observe(obj)
// obj.foo
// obj.foo = '123465'
// obj.baz.a = 12

obj.baz = { b: 2 }

set(obj, 'demo', '456')
obj.demo


// Object.defineProperty() 对数组无效，因为这是一个对象的方法
// 分析 :改变数组的方法只有7个 
obj.arr.push(4)

// console.log(obj)

// 1.作业解决数组数据的响应化 （替换数组实例的原型的方法，让他们在修改数组的同时还可以更新通知）



